<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item h3 under-line")
                div(class="flex-row")
                    div(class="flex-row-item flex-center-center flex-2") ---基础率---
                    div(class="flex-row-item right") {{activeId+1}}/6
            div(class="flex-column-item flex-center" v-for="menu in getMenus()")
                div(:class="{'selected-text': menu.id == activeId ? true: false}",class="flex-center") {{menu.name}}
        control-select(v-model="modeModel",:visible="visible",ref="mode")
        control-dialog(title="临基运行中",sub-title="禁止设置",:visible="dialogVisible")
</template>

<script>
    import TemporaryBasicRateMode from "@/model/TemporaryBasicRate";

    var repo = new TemporaryBasicRateMode();

    import MenuList from '@/mixins/MenuList'

    var options = [];
    for (var key in repo.modeConst) {
        var mode = repo.modeConst[key];
        options.push({
            name: mode,
            isActive: repo.getCurrentMode() == mode ? true : false
        });
    }

    export default {
        mixins: [MenuList],
        data() {
            return {
                // activeId: 0,
                page: {maxResultCount: 3, skipCount: 0},
                options: options,
                visible: false,
                dialogVisible: false,
                modeModel: {
                    name: '临基率模式',
                    value: window.rate.temp.value,
                    options: [
                        {name: 'xx%', value: 'percentage'},
                        {name: '±x', value: 'deviation'}
                    ],
                    onChange(model) {
                        window.rate.temp.value = model.value;
                    }
                }
            };
        },
        computed: {
            menus() {
                var menus = [
                    {name: "1.基础率快设", id: 0, to: "/base-rate/fast-setting"},
                    {name: "2.基础率设置", id: 1, to: "/base-rate/base-setting"},
                    {name: "3.基础率回顾", id: 2, to: "/base-rate/history"},
                    {name: "4.基础率方案", id: 3, to: "/base-rate/plan"},
                    {name: "5.临时基础率", id: 4, to: "/base-rate/temporary-setting"},
                    {
                        name: "6.临基率模式:" + repo.getCurrentMode(),
                        id: 5,
                        showModal: true
                    }
                ];
                return menus;
            },
            currentPageMenus() {
                var start = this.skipCount;
                var end = this.skipCount + this.page.maxResultCount;
                return this.getMenus().slice(start, end);
            }
        },
        methods: {
            getMenus() {
                var menus = [
                    {name: "1.基础率快设", id: 0, to: "/base-rate/fast-setting"},
                    {name: "2.基础率设置", id: 1, to: "/base-rate/base-setting"},
                    {name: "3.基础率回顾", id: 2, to: "/base-rate/history"},
                    {name: "4.基础率方案", id: 3, to: "/base-rate/plan"},
                    {name: "5.临时基础率", id: 4, to: "/base-rate/temporary-setting"},
                    {
                        name: "6.临基率模式:" + (window.rate.temp.value.value == "percentage" ? "xx%" : "±x"),
                        id: 5,
                        showModal: true
                    }
                ];
                var start = this.skipCount;
                var end = this.skipCount + this.page.maxResultCount;
                return menus.slice(start, end);
            },
            up() {
                if (this.visible) {
                    this.$refs.mode.up();
                    return;
                }

                if (this.activeId == 0) {
                    this.activeId = this.menus[this.menus.length - 1].id;
                } else {
                    this.activeId = this.activeId - 1;
                }
            },
            down() {
                if (this.visible) {
                    this.$refs.mode.down();
                    return;
                }

                if (this.activeId == this.menus[this.menus.length - 1].id) {
                    this.activeId = 0;
                } else {
                    this.activeId = this.activeId + 1;
                }
            },

            back() {
                if (this.visible) {
                    this.visible = !this.visible;
                } else if (this.dialogVisible) {
                    this.dialogVisible = false;
                } else {
                    this.$router.push("/menu?index=1");
                }
            },
            yes() {
                if (this.visible) {
                    this.visible = false;
                    return;
                }
                if (this.dialogVisible) {
                    this.dialogVisible = false;
                    return;
                }

                var active = this.menus.find(menu => {
                    return menu.id == this.activeId;
                });
                if (active.showModal) {
                    if (window.rate.temp.isOn) {
                        this.dialogVisible = true;
                    } else {
                        this.visible = true;
                    }
                } else {
                    this.$router.push(active.to);
                }
            }
        }
    };
</script>

<style lang="less">
</style>
